<template>
  <div class="text-xs text-gray-500 leading-normal">
    <span>{{ info }} </span>
    <el-button type="success" link @click="showAll">
      <span class="flex" v-if="!isShowAll"> 展开<arrow-down /> </span>
      <span class="flex" v-else> 收起<arrow-up /> </span>
    </el-button>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { ArrowDown, ArrowUp } from '@icon-park/vue-next'

interface DescProp {
  desc: string
  count: number
}

const props = withDefaults(defineProps<DescProp>(), {
  desc: '',
  count: 99,
})

const isShowAll = ref<boolean>(false)

const info = computed(() => (isShowAll.value ? props.desc : `${props.desc.substring(0, props.count)}...`))

const showAll = () => {
  isShowAll.value = !isShowAll.value
}
</script>

<style lang="less" scoped></style>
